<template>
	<view>
		<view class="white-card list-item">
			<u-image class="picture" src="@/static/img/personbg.png"></u-image>
			<view class="content">
				<text>{{subscribeData.name}}</text>
				<text>预约码：</text>
				<text>{{subscribeData.ordernum}}</text>
				<text> 时间：{{subscribeData.created_at}}</text>
			</view>
			<view v-if="subscribeData.status==1">
				<text class="codestext">中签</text>
				<image class="codesimg" src="../static/icon/codes@2x.png"></image>
				<!-- <u-button type="primary" shape="circle" :custom-style="customStyle">订单关闭</u-button> -->
			</view>
			<view v-if="subscribeData.status==2">
				<text class="codestext">未中签</text>
				<image class="codesimg" src="../static/icon/notcodes@2x.png"></image>
				<!-- <u-button type="primary" shape="circle" :custom-style="customStyle">订单关闭</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import uButton from "@/uview-ui/components/u-button/u-button.vue";
	import uImage from "@/uview-ui/components/u-image/u-image.vue";
	export default {
		components: {
			uImage,
			uButton
		},
		props: {
			subscribeData: {
				// 列表标题
				type: Object
			},
		},
		data() {
			return {
				customStyle: {
					background: "#07D0D2",
					color: "#ffffff",
					fontSize: "24rpx",
					padding: "0 40rpx",
					borderRadius: "20rpx",
					position: 'absolute',
					bottom: '20rpx',
					right: '20rpx',
					height: '50rpx',
					lineHeight: '50rpx',
				},
			};
		}
	}
</script>

<style lang="scss">
	.list-item {
		height: 300rpx;
		margin: 30rpx;
		display: flex;
		position: relative;
		padding: 30rpx 0 40rpx 30rpx;

		.picture {
			width: 174rpx !important;
			height: 206rpx !important;
			border-radius: 20px !important;
		}

		.content {
			padding-left: 40rpx;
			display: flex;
			flex-direction: column;
			font-size: 24rpx;
			height: 100%;
			text {
				line-height: 52rpx;
			}
		}

		.codesimg {
			position: absolute;
			right: 0;
			top: 0;
			width: 117rpx;
			height: 112rpx;
		}

		.codestext {
			width: 117rpx;
			position: absolute;
			text-align: center;
			right: 0;
			top: 35rpx;
			z-index: 2;
			font-size: 30rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
